<!--个人信息展示-->

<template>

  <div class="personal">
    <!--    //  margin: auto"   水平居中 -->
  <el-card style="width: 600px; margin: auto">
    <el-form label-width="80px" size="small">
     <el-upload
        class="avatar-uploader"
        action="http://localhost:8088/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="form.photo" :src="form.photo" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <el-form-item label="学号">
        <el-input v-model="form.stuNum" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.stuName" autocomplete="off" readonly></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.mobile" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="form.sex" label="F">女</el-radio>
        <el-radio v-model="form.sex" label="M">男</el-radio>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age" autocomplete="off"  readonly></el-input>
      </el-form-item>
      <el-form-item label="证件类型">
        <el-radio v-model="form.idType" label="1">身份证</el-radio>
        <el-radio v-model="form.idType" label="2">学生证</el-radio>
        <el-radio v-model="form.idType" label="3">其他</el-radio>
      </el-form-item>
      <el-form-item label="证件号">
        <el-input v-model="form.idNum" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="生日">
        <el-date-picker
          v-model="form.birthday"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>


      <el-form-item label="籍贯" prop="selectedOptions">
        <el-cascader
          size="medium"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
          style="width: 350px">
        </el-cascader>
      </el-form-item>


      <el-form-item >
        <el-button type="primary" @click="adds()">确 定</el-button>
      </el-form-item>
    </el-form>


  </el-card>

  <div class="weather">
    <div id="he-plugin-standard"></div>
  </div>
  </div>

</template>

<script>
import {CodeToText, regionData} from "element-china-area-data";

export default {
  name: "Person",
  data(){
    return{
      //省市县全部数据
      options: regionData,
      //选中的省市县区域码
      selectedOptions: [],


      form:{},
      student: localStorage.getItem("student") ? JSON.parse(localStorage.getItem("student")) : {}
    }

  },
  created() {
    this.getUser().then(res => {
      console.log(res)
      this.form = res
      //省市回显
      this.selectedOptions = [this.form.provincesId, this.form.citiesId, this.form.areasId]
    }),
      //和风天气插件调用
      window.WIDGET = {
        "CONFIG": {
          "layout": "2",
          "width": 400,
          "height": 400,
          "background": "1",
          "dataColor": "FFFFFF",
          "borderRadius": "10",
          "key": "776b3577b0484247baf2054021329eae"  //这里换成自己的key！
        }
      }
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
    document.getElementsByTagName('head')[0].appendChild(script);

  },
  methods:{
    async getUser() {
      return (await  this.request.get("/student/"+this.student.stuName)).data
    },

    adds(){
      this.request.post("/student/addAndUpdate", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          //触发父级更新Animal的方法
          this.$emit("refreshStudent")
          // 更新浏览器存储的用户信息
          this.getUser().then(res => {
            res.token = JSON.parse(localStorage.getItem("student")).token
            localStorage.setItem("student", JSON.stringify(res))
          })
        }else {
          this.$message.error("保存失败")
        }
      })
    },
    handleAvatarSuccess(res) {
      this.form.photo = res
    },
    //省市区三级联动事件
    handleChange (value) {
      // this.edit();
      //console.log(value)
      if (value[1] != null && value[2] != null) {
        var dz = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]]

      } else {
        if (value[1] != null) {
          dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
        } else {
          dz = CodeToText[value[0]]
        }
      }
      this.form.nativePlace = dz

      this.form.provincesId= this.selectedOptions[0]
      this.form.citiesId= this.selectedOptions[1]
      this.form.areasId= this.selectedOptions[2]
    },

  }


}
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
.weather{
  position: absolute;
 right: 100px;

  top: 50px;
}
</style>
